<template>
  <!--  仓库报废 -->
  <el-dialog
    width="500px"
    :title="$t('仓库报废')"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    :before-close="cancel">
    <el-form size="mini" @submit.native.prevent ref="formRef" label-width="80px" :model="form" :rules="rules">
      <el-form-item label-width="0" prop="skuSerializable">
        <el-input size="small" ref="inputRef" v-model="form.skuSerializable" clearable>
          <div style="width: 100%; height: 100%" slot="append" @click="getScanSerialInfo">
            {{ $t('查询') }}
          </div>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('商家名称')"> {{ detail.distrName }}</el-form-item>
      <el-form-item label="sku"> {{ detail.skuNo }}</el-form-item>
      <el-form-item :label="$t('库位号')"> {{ detail.spNo }}</el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">{{ $t('确定') }}</el-button>
      <el-button @click="cancel">{{ $t('取消') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getScanSerialInfo, scrapSku } from '@/api/purchasingManage/warehousePurchaseOrder'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: {},
    },

    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      form: {
        skuSerializable: '',
      },
      // 表单校验
      rules: {
        skuSerializable: [{ required: true, message: this.$t('请输入'), trigger: 'blur' }],
      },
      detail: {},
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.resetForm()
        Object.keys(this.formData).forEach((key) => {
          this.$set(this.form, key, this.formData[key])
        })
        this.detail = {}

        this.$nextTick(() => {
          this.$refs.inputRef.focus()
        })
      }
    },
  },
  methods: {
    getScanSerialInfo() {
      if (this.form.skuSerializable) {
        getScanSerialInfo({ skuSerializable: this.form.skuSerializable }).then((res) => {
          const { code } = res
          if (code === 200) {
            this.detail = { ...res.data }
          }
        })
      }
    },
    handleSubmit() {
      if (!this.detail.skuNo) {
        return this.$message({ type: 'error', message: this.$t('请查询后再次提交') })
      }
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.$confirm(this.$t('确认报废?'), this.$t('提示'), {
            type: 'warning',
          }).then(() => {
            const data = {
              id: this.form.skuSerializable,
              scrapType: 2,
            }
            scrapSku(data).then((res) => {
              const { code, msg } = res
              if (code === 200) {
                this.$message({ type: 'success', message: msg })

                this.cancel()
                this.$emit('getList')
              }
            })
          })
        }
      })
    },
    resetForm() {
      Object.keys(this.form).forEach((key) => (this.form[key] = ''))
    },

    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-input-group__append {
  width: 100px;
  height: 100%;
  text-align: center;
  cursor: pointer;
}
</style>
